<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button @click="handleEdit">确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button>编辑</button>
    </div>
  </div>
  <!-- Vue异步更新、$nextTick
    需求：编辑标题，编辑框自动聚焦
    1.点击编辑，显示编辑框
    2.让编辑框，立刻获取焦点
    this.isShowEdit = true  //显示输入框
    this.$refs.inp.focus()  //获取焦点
    问题：“显示之后”，立刻获取焦点是不能成功的
    原因：Vue是异步更新DOM（提升性能）
    $nextTick：等DOM更新后，才会触发执行此方法里的函数体
    语法：this.$nextTick(函数体)
    this.$nextTick(() => {
        this.$refs.inp.focus()
    }) -->
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    handleEdit() {
      this.isShowEdit = true
      this.$nextTick(()=> {
         this.$refs.inp.focus()
   })
    }
   
  },
}
</script>

<style>
</style>